import memo from '../common/wrapMemo';
import { Table } from 'antd';
import React, { useState, useEffect } from 'react';
import style from './LogManage.module.scss';
import { CloseOutlined } from '@ant-design/icons';
import api from '../../api';
// import LogDetail from './LogDetail';
import {formatTime} from '../../util/util';

// import { Scrollbars } from 'react-custom-scrollbars';

// 滚动条参数
const scroll = {
    // 如果最终结果表格内容与表格头部无法对齐。
    // 表格头需要增加空白列，弹性布局
    width: '100%',
    // 最大高度，内容超出该高度会出现滚动条
    height: window.innerHeight - 340,
};

const actionEnum = {
    DELETE_LAYER: '删除图层',
    DELETE_SHAPE: '删除图斑',
    UPLOAD_DATA: '导入数据',
    EXPORT_DATA: '导出数据',
    SUBMIT_CHANGE: '提交改动',
    CHANGE_AUDIT: '审核改动',
    ADD_USER: '新增用户',
    ADD_SHAPE: '新增图斑',
};

const statusEnum = {
    PASS: '通过审核',
    SUCCESS: '成功',
    FAILURE: '失败',
    UNPASS: '未通过审核',
};

const LogManage = memo((props) => {
    const { onClose } = props;
    const [page, setPage] = useState({ current: 1, pageSize: 10 });
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    // const [showDetail, setShowDetail] = useState(false);        // 详情面板显隐
    // const [detailData, setDetailData] = useState({});           // 详情数据

    const columns = [
        {
            title: '操作时间',
            dataIndex: 'createTime',
            render(_, record) {
                return <span>{formatTime(record.createTime)}</span>;
            },
            ellipsis: true,
            align: 'center',
        },
        {
            title: '操作者',
            dataIndex: 'userName',
            ellipsis: true,
            align: 'center',
        },
        {
            title: '操作分类',
            dataIndex: 'action',
            ellipsis: true,
            align: 'center',
            render: (text) => {
                return actionEnum[text] || text;
            },
        },
        {
            title: '操作内容',
            dataIndex: 'actionContent',
            ellipsis: true,
            align: 'center',
            render(_, record) {
                return (record.action === 'SUBMIT_CHANGE' || record.action === 'CHANGE_AUDIT' || record.action === 'ADD_SHAPE') ? (
                    // <Button
                    //     className={style.detailBtn}
                    //     type="link"
                    //     onClick={() =>{
                    //         setShowDetail(false);
                    //         setDetailData(record.actionContent);
                    //     }}
                    // >
                    //     详情
                    // </Button>
                    '-'
                ) : (record.action !== 'DELETE_SHAPE')? record.actionContent : '-';
            },
        },
        {
            title: '审核状态',
            dataIndex: 'status',
            align: 'center',
            render(_, record) {
                return statusEnum[record.status];
            },
        },
    ];

    useEffect(() => {
        search();
    }, [page]);

    const search = () => {
        setLoading(true);
        api.log
            .getLogList({ page: page.current, size: page.pageSize })
            .then((res) => {
                const {code, data} = res.data;
                if(code === 200){
                    const {count, result} = data;
                    setData(result);
                    setTotal(count);
                }
            })
            .finally(() => {
                setLoading(false);
            });
    };
    const tableParamsChange = (pagination) => {
        setPage(pagination);
    };

    // const components = {
    //     table(props) {
    //         const { className } = props;
    //         return (
    //             <Scrollbars
    //                 style={scroll}
    //                 onScrollStop={self.handleScrollStop}
    //                 ref={self.scrollbarsRef}
    //             >
    //                 <table className={className}>{props.children}</table>
    //             </Scrollbars>
    //         );
    //     },
    // };

    return (
        <>
            <div className={style.logManage}>
                <div className={style.head}>
                    <span>日志</span>
                    <CloseOutlined onClick={onClose} />
                </div>
                <div className={style.tableWrap}>
                    <Table
                        loading={loading}
                        className={style.table}
                        columns={columns}
                        rowKey={(record) => record.id}
                        pagination={{
                            pageSize: page.pageSize,
                            showSizeChanger: true,
                            total: total,
                            showTotal: (total) => `共${total}条`,
                        }}
                        dataSource={data}
                        onChange={tableParamsChange}
                        rowClassName={style.tableRow}
                        // 此scroll选项必须开启，宽高与react-custom-scrollbars插件一致
                        scroll={{ y: scroll.height, x: scroll.width }}
                        // 将react-custom-scrollbars组件插入到表格中
                        // components={components}
                    />
                </div>
            </div>
            {/* {showDetail && <LogDetail detail={detailData} onClose={() => setShowDetail(false)} />} */}
        </>
    );
});
export default LogManage;
